<template>
  <el-card style="width:1000px;margin:0 auto;">
    <div slot="header" class="clearfix">
      <span>账户工厂币充值<span v-if="photoStudio">（当前剩余工厂币：{{ photoStudio.amount.toFixed(2) }} 个，余额：{{ photoStudio.offLineAmount.toFixed(2) }} 元）</span></span>
    </div>
    <el-row>
      <el-form ref="rechargeForm" :model="recharge" :rules="{
        amount: [{ required: true, message: '请输入充值工厂币数量' }, { type: 'number', message: '必须为数字值' },]
      }" label-width="100px">
        <el-form-item prop="amount" label="充值工厂币">
          <el-input v-model.number="recharge.amount" type="number" min="1" step="100" style="width:150px;">
            <template slot="append">个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="支付金额">
          {{ recharge.amount.toFixed(2) }} 元
        </el-form-item>
        <el-form-item label="支付方式">
          <payment-view ref="paymentVew" :payType="'WechatPay'" :usePayTypes="['WechatPay', 'AliPay']" businessType="recharge" @paid-finished="paidFinished($event)" />
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="handleSubmit">确认充值</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-divider>充值记录</el-divider>
    <ul v-infinite-scroll="loadLog" infinite-scroll-disabled="disabled" style="overflow:auto" v-if="logs && logs.length > 0">
      <el-row>
        <el-col :span="6" class="table-title">充值时间</el-col>
        <el-col :span="6" class="table-title">支付方式</el-col>
        <el-col :span="6" class="table-title">充值金额</el-col>
        <el-col :span="6" class="table-title">充值类型</el-col>
      </el-row>
      <li v-for="log in logs" :key="log.id" class="table-row" style="margin-top:5px;">
        <el-row>
          <el-col :span="6">{{ log.createTime }}</el-col>
          <el-col :span="6">{{ log.payType ? log.payType.desc : '' }}</el-col>
          <el-col :span="6">{{ log.amount.toFixed(2) }}</el-col>
          <el-col :span="6">{{ log.payType ? (log.payType.name === 'Offline' ? '余额' : '工厂币') : '' }}</el-col>
        </el-row>
      </li>
    </ul>
    <p v-if="loading" class="table-row" style="text-align:center;">加载中...</p>
    <p v-if="noMore" class="table-row" style="text-align:center;">没有更多了</p>
  </el-card>
</template>

<script>
import waves from '@/directive/waves' // 水波纹指令
import PaymentView from '@/components/payment/paymentView'
import photoStudioApi from '@/api/photoStudio'
import amountChangeLogApi from '@/api/amountChangeLog'

export default {
  directives: {
    waves
  },
  components: {
    PaymentView
  },
  watch: {
    mainContainerHeight: function (newHeight, oldHeight) {
      this.resize()
    },
    'recharge.amount': function (newCount, oldCount) {
      if ((newCount + '').indexOf('.') > -1) {
        this.recharge.amount = Math.ceil(newCount)
      }
      if (newCount <= 0) {
        this.recharge.amount = 1
      }
    }
  },
  data () {
    return {
      photoStudio: null,
      recharge: {
        amount: 1000
      },
      logs: [],
      logPageInfo: {
        pageIndex: 1,
        orders: ['createTime,desc']
      },
      loading: false,
      noMore: false
    }
  },
  computed: {
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    /**
     * 提交数据
     */
    handleSubmit () {
      this.$refs.rechargeForm.validate().then(pass => {
        if (pass) {
          amountChangeLogApi.recharge(this.recharge.amount).then(response => {
            this.$refs.paymentVew.startPayment(response.data.id)
          })
        }
      })
    },
    /**
     * 支付成功
     */
    paidFinished (event) {
      if (event.success) {

      } else {
        this.$alert(`未完成支付：${event.message}。`, '提示', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      }
    },
    /**
     * 获取当前影楼信息
     */
    getPhotoStudio () {
      photoStudioApi.getStudio().then(response => {
        this.photoStudio = response.data
      })
    },
    /**
     * 加载充值记录
     */
    loadLog () {
      this.loading = true
      amountChangeLogApi.getPaged({
        pageInfo: this.logPageInfo,
        condition: {
          type: 'Recharge'
        }
      }).then(response => {
        response.data.content.forEach(l => this.logs.push(l))
        this.noMore = this.logs.length === response.data.totalElements
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  },
  mounted () {
    this.getPhotoStudio()
    this.loadLog()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  .custom-tooltip-item-device-r1 {
    width: 200px;
    border-left: 8px solid #1890ff;
    margin: 10px;
    font-weight: bold;
    &:nth-child(2) {
      border-left-color: #f0ec09;
    }
    &:nth-child(3) {
      border-left-color: #0aaf41;
    }
    &:nth-child(4) {
      border-left-color: #fa1414;
    }
  }
  .custom-tooltip-item-name {
    line-height: 20px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
  }
  .custom-tooltip-item-value {
    line-height: 30px;
    color: #262626;
    font-size: 22px;
  }
  .table-title {
    color: #909399;
    font: 700 12px Arial,"microsoft yahei";
    text-align: center;
  }

  .table-row {
    list-style:none;
    color: #303133;
    font: 700 12px Arial,"microsoft yahei";
    text-align: center;
  }
</style>
